//正常的情况
.w-s-left{
    width: 100%; height: 100%; 
    .ps__rail-y{ //scroll插件的滚动条的强制设置
        top: 60px !important;
    }
    .w-s-left-inner{
        padding: 2px 1.5rem 1.5rem;
        .w-s-l-i-menu{
            margin: 0;
            padding: 0;
            position: relative;
            list-style: none;
            .w-s-l-item-head{
                text-transform: uppercase;
                font-size: .8rem;
                margin: .75rem 0;
                font-weight: bold;
                color: #3f6ad8;
                white-space: nowrap;
                position: relative;
            }
            >li{
                cursor: pointer;
               > a{
                    display: block;
                    line-height: 2.4rem;
                    height: 2.4rem;
                    padding: 0 1.5rem 0 45px;
                    position: relative;
                    border-radius: .25rem;
                    color: #343a40;
                    white-space: nowrap;
                    transition: all .2s;
                    margin: .1rem 0;
                    &:hover{
                        background: #e0f3ff;
                        text-decoration: none;
                        .iconfont{
                            opacity: .6;
                        }
                    }
                }
                i.menu-icon{
                    text-align: center;
                    width: 34px;
                    height: 34px;
                    line-height: 34px;
                    position: absolute;
                    left: 5px;
                    top: 50%;
                    margin-top: -17px;
                    font-size: 1.5rem;
                    opacity: .3;
                    transition: color 300ms;
                }
                i.menu-status-icon{
                    text-align: center;
                    height: 34px;
                    line-height: 34px;
                    position: absolute;
                    left: auto;
                    right: -5px;
                    top: 48%;
                    margin-top: -17px;
                    font-size: 1rem;
                    opacity: .3;
                    transition: transform 300ms;
                }
                &.menu-item.active{
                    >a{
                        font-weight: bold;
                    }
                    .mm-collapse{
                        display: block;
                        transition: all .2s;
                        >li.selected a{
                            color:#3f6ad8;
                            text-decoration: none;
                            background: #e0f3ff;
                        }
                    }
                    i.menu-status-icon{
                        transform: rotate(-180deg);
                    }
                }
                &.menu-item.selected{
                    a{
                        background: #e0f3ff;
                        text-decoration: none; 
                    }
                }
                .mm-collapse{
                    margin: 0;
                    transition: padding 300ms;
                    padding: .5em 0 0 2rem;
                    position: relative;
                    list-style: none;
                    display: none;
                    transition: all .3s;
                    &::before{
                        content: '';
                        height: 100%;
                        opacity: 1;
                        width: 3px;
                        background: #e0f3ff;
                        position: absolute;
                        left: 20px;
                        top: 0;
                        border-radius: 15px;
                    }
                   >li > a{
                        color: #6c757d;
                        height: 2rem;
                        line-height: 2rem;
                        padding: 0 1.5rem 0;
                        display: block;
                        position: relative;
                        border-radius: .25rem;
                        white-space: nowrap;
                        margin: .1rem 0px;
                        transition: all .2s;
                        &:hover{
                            color:#3f6ad8;
                            text-decoration: none;
                            background: #e0f3ff;
                        }
                    }
                }
            }
        }
    }
    .w_url{
        border-radius: .25rem; width: 100%;  text-align: center; line-height: 2.4rem; height: 2.4rem; cursor: pointer; background: #e0f3ff; color: #3f6ad8; margin-top: 10px;font-weight: bold;text-transform: uppercase;font-size: .8rem;
        .fold{display: none;}
        .default{display: inline-block;}
    }
}
// 小屏幕
.close-menu {
    //一般情况
    .wlh-main .wlh-sider-left{
        transition: all .3s ease;
        width: 80px;
        min-width: 80px;
        flex: 0 0 80px;
        z-index: 13;
        .w-s-left{
            position: static;
            height: auto;
            overflow: initial !important;
            .w-s-left-inner .w-s-l-i-menu{
                .w-s-l-item-head{
                    text-indent: -999em;
                    &::before{
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background: #e0f3ff;
                        text-indent: 1px;
                    }
                }
                > li{
                    > a{
                        text-indent: -99rem;
                        padding: 0;
                        .menu-icon{
                            text-indent: 0;
                            left: 50%;
                            margin-left: -17px;
                        }
                    }
                    .mm-collapse{
                        display: none;
                    }
                } 
            } 
            .w_url{
                .fold{display: inline-block;}
                .default{display: none;}
            }
        }
    }
    //悬浮
    .wlh-main .wlh-sider-left:hover{
        flex: 0 0 280px !important;
        width: 280px !important;
        .w-s-left{
            position: absolute;
            height: 100%;
            overflow: hidden !important;
            .w-s-left-inner .w-s-l-i-menu{
                .w-s-l-item-head{
                    text-indent:initial;
                    &::before{
                        content: none;
                    }
                }
                > li{
                    > a{
                        text-indent: initial;
                        padding: 0 1.5rem 0 45px;
                        .menu-icon{
                            text-indent: initial;
                            left: 5px;
                            margin-left: 0;
                        }
                    }
                    &.menu-item.active{
                        >a{
                            font-weight: bold;
                        }
                        .mm-collapse{
                            display: block;
                        }
                    }
                    .mm-collapse{
                        display: none;
                    }
                } 
            }
            .w_url{
                 border-radius: .25rem; width: 100%;  text-align: center; line-height: 2.4rem; height: 2.4rem; cursor: pointer; background: #e0f3ff; color: #3f6ad8; margin-top: 10px;font-weight: bold;text-transform: uppercase;font-size: .8rem;
                .fold{display: none;}
                .default{display: inline-block;}
            }
        }
    }
    .wlh-main .wlh-main-out{
        padding-left: 80px;
    }
}